<template>
  <div class="admin-container">
  <el-button type="success" @click="dialogVisible=true;addAdmin()">添加管理员</el-button>
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="750">
        <el-table-column
          prop="id"
          label="编号"
          type="index"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="adminname"
          label="用户名"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="dialogVisible=true;updatePsd(scope.row.id,scope.row.adminname)" type="warning" size="small">修改密码</el-button>
            <el-button @click="delAdmin(scope.row.id)" type="danger" size="small">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出框 -->
    <div class="dialog">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!-- 表单 -->
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="管理员名">
            <el-input v-model="formLabelAlign.adminname"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="formLabelAlign.newpassword"></el-input>
          </el-form-item>
        </el-form>
        <!-- ----------------------------------------- -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false;save()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAdminList,postAdmin,putAdmin,delAdmin } from "../../api/admin/admin.js";
export default {
  data() {
    return {
      tableData:[],
      dialogVisible: false,
      labelPosition: 'left',
      formLabelAlign: {
        adminname:'',
        newpassword: '',
      },
      isedit:false,
      id:''
    }
  },
  methods: {
    init() {
      getAdminList().then( (res) => {
        // console.log(res.data);
        this.tableData = res.data.data
      })
    },
    delAdmin(id) {
      delAdmin(id).then( () => {
        this.init()
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    updatePsd(id,adminname) {
      this.isedit = true
      this.id = id
      this.formLabelAlign.adminname = adminname
    },
    addAdmin() {
      this.isedit = false
    },
    // 根据isedit判断是添加post还是修改put
    save() {
      // 修改
      if(this.isedit) {
        console.log(this.id);
        console.log(this.formLabelAlign);
        putAdmin(this.id,this.formLabelAlign.newpassword)
          this.formLabelAlign.newpassword = ''
          this.init()
      }
      // 添加
      else{
        console.log(this.formLabelAlign);
        postAdmin(this.formLabelAlign).then(() => {
          this.formLabelAlign.adminname = ''
          this.formLabelAlign.newpassword = ''
          this.init()
        })
      }
    }
  },
  created() {
    this.init()
  }
}
</script>

<style>

</style>